<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            /*取消系统默认的8px的外边距*/
            padding: 0;
        }

        body {
            min-width: 600px;
            /*网页最小宽度为600px*/
        }

        /*头部+尾部*/
        .header,
        .footer {
            width: 100%;
            height: 100px;
            line-height: 100px;
            /*设置垂直居中  行高和高度一致*/
            background-color: rgb(50, 122, 104);
            text-align: center;
            font-size: 30px;
        }

        /*主体*/
        .container {
            padding: 0 200px;
            /*留出left和right的位置*/
            overflow: hidden;
        }

        .column {
            float: left;
            height: 200px;
            position: relative;
        }

        .left {
            width: 200px;
            background-color: #f00;
            margin-left: -100%;
            /*双飞翼写法*/
            left: -200px;
            /*圣杯写法 */
            /*left左边边距 left：-20px相当于向左移动20px  left:20px相当于左侧右移20px right右边边距*/
        }

        .center {
            width: 100%;
            background-color: #0f0;
        }

        .right {
            width: 200px;
            background-color: #0ff;
            margin-left: -200px;
            /*双飞翼写法*/
            right: -200px;
            /*圣杯写法*/
        }
    </style>
</head>

<body>
    <!-- 一个网页通常由上中下三部分组成 -->
    <!-- 1.header头部 -->
    <div class="header">#header</div>
    <!-- 2.主题内容区 -->
    <div class="container">
        <div class="column center">中间</div>
        <div class="column left">左侧</div>
        <div class="column right">右侧</div>
    </div>
    <!-- 3.footer尾部 -->
    <div class="footer">#footer</div>
</body>

</html>